<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MO工序行进图</title>
  <link rel="stylesheet" href="../../assets/css/element-ui.css"/>
  <link rel="stylesheet" href="../../assets/css/styles.css"/>
  <script src="../../assets/js/constant.js"></script>
  <script src="../../assets/js/utils.js"></script>
  <script src="../../assets/js/axios.min.js"></script>
  <script src="../../assets/js/auth.js"></script>
  <!-- 引入 Vue.js -->
  <script src="../../assets/js/vue.js"></script>
  <!-- 引入 Element UI 的 JS 文件 -->
  <script src="../../assets/js/element-ui.js"></script>
  <script src="../../assets/js/cdn.js"></script>
    <link rel="stylesheet" href="../../assets/fontawesome-free-6.7.2-web/css/all.min.css" />
  <style>
      /* 自定义样式 */
      .pu {
          display: inline-block;
          width: max-content;
      }

      /* 表格样式，去掉边框线 */
      .pu-table {
          width: 100%;
          border-collapse: collapse;
      }

      .pu-table th,
      .pu-table td {
          padding: 8px;
          text-align: center;
          border: none; /* 去掉边框线 */
      }

      /* SVG 箭头样式 */
      .arrow-svg {
          width: 100%;
          height: auto;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .svg-gray {
          fill: #ccc;
          color: #fff;
      }

      .svg-green {
          fill: #52c41a;
          color: #fff;
      }

      .arrow-svg text {
          fill: white; /* 白色文字 */
          word-wrap: break-word;
          max-width: 180px; /* 限制文字宽度 */
          dominant-baseline: middle; /* 修改为 middle 实现垂直居中 */
      }

      /* 固定首列样式 */
      .pu-table td:first-child {
          position: sticky;
          left: 0;
          background-color: white; /* 设置背景色，避免滚动时被覆盖 */
          z-index: 1;
      }
  </style>
</head>

<body>
<div id="app">
  <!-- <div class="header">
    <div class="container header-content">
      <div class="logo">订单管理系统</div>
      <div style="position: absolute; left: 50%;">
        <el-button type="primary" size="large" @click="open('../index.html')">
          首页
        </el-button>
        <el-dropdown size="large" @command="open">
          <el-button type="primary" size="large">
            业务中心<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in businessCenters" :key="item.name" :command="item.path">{{item.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="user-info" v-if="currentUser.name">
        欢迎，{{ currentUser.name }}
        <el-button type="primary" size="mini" @click="exit(2)">登出</el-button>
      </div>
    </div>
  </div> -->
  <lx-header slot="header" v-on:toggle="isToggle = !isToggle"></lx-header>
  <div class=" main-content">
    <div class="content" style="width: 100%; padding: 0">
      <div class="display-box">
        <table class="pu-table">
          <tbody>
            <tr v-for="(moPu, index) in moPuData" :key="index">
              <td>{{ moPu.moCode }}</td>
              <td v-for="(item, index) in moPu.currentPuData" :key="index">
                <span class="pu">
                  <svg :class="['arrow-svg', index <= 2 ? 'svg-green' : 'svg-gray']" viewBox="0 0 280 120"> <!-- 放大 viewBox 以适应更长的箭头 -->
                    <!-- 调整箭头的多边形点，使前一个箭头的右侧凸起贴近下一个箭头的左侧凹陷处 -->
                    <polygon points="0,0 220,0 280,60 220,120 0,120 60,60"/>
                    <!-- 调整 x 和 y 属性的值实现偏移 -->
                    <text x="55%" :y="getTextY(item.pu)" text-anchor="middle">
                      <tspan v-for="(line, lineIndex) in splitText(item.pu)" :key="lineIndex" x="55%" :dy="lineIndex === 0? '0' : '1.2em'">
                        {{ line }}
                      </tspan>
                    </text>
                  </svg>
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<script type="module">
    import LxHeader from '../../pages/components/LxHeader/index.js'
    Vue.component('lx-header', LxHeader)
    checkAuthentication(2)
    new Vue({
        el: '#app',
        data() {
            return {
                currentUser: JSON.parse(localStorage.getItem('currentUser')) || {},
                userMenuList: JSON.parse(localStorage.getItem('userMenuList')) || [],
                showDropdown: false,
                businessCenters: [
                    { name: '订单中心', path: 'index.html' },
                    { name: '用户中心', path: '#' },
                    { name: '产品中心', path: '#' },
                    { name: '库存中心', path: '#' },
                    { name: '财务中心', path: '#' },
                    { name: '数据中心', path: '#' },
                    { name: '系统中心', path: '#' },
                    { name: '消息中心', path: '#' }
                ],
                root_host: root_host,
                request_host: request_host,
                moPuData: [],
            };
        },
        created() {
            this.getMoPuData()
        },
        methods: {
            exit,
            open(url) {
                if (url) window.open(url)
            },
            getMoPuData() {
                try {
                    axios.get(`${this.request_host}/report/getMoProgressData`).then((response) => {
                        if (response.status == 200) {
                            this.moPuData = response.data.data
                        }
                    })
                } catch (error) {
                    console.error('请求失败:', error)
                }
            },
            isProgress(puCode, currentPuData) {
                return currentPuData.some(moPu => moPu.puCode === puCode);
            },
            splitText(text) {
                const lines = [];
                for (let i = 0; i < text.length; i += 10) {
                    lines.push(text.slice(i, i + 10));
                }
                return lines;
            },
            getTextY(puName) {
                let y = 30
                switch (this.splitText(puName).length) {
                    case 1:
                        y = 60
                        break;
                    case 2:
                        y = 50
                        break;
                    case 3:
                        y = 40
                        break;
                    default:
                        y = 30
                        break;
                }
                return y;
            }
        }
    });
</script>
</body>

</html>
